import { useEffect, useState } from "react";
import SimpleCanvas from "../components/SimpleCanvas";
import Navbar from "../components/Navbar";
import { diagram } from "../data/heroDiagram";
import FadeIn from "../animations/FadeIn";
import { Form, Toast, Button } from "@douyinfe/semi-ui";
import { login, findOneDrawdbUserName } from "../api/request";
import { useNavigate } from "react-router-dom";
import Register from "../components/EditorHeader/Modal/Register";

export default function LandingPage() {
  const navigate = useNavigate();
  const [registerVisible, setRegisterVisible] = useState(false);

  const handleSubmit = async (values) => {
    const result = await login({ ...values });
    if (result.code == "00000") {
      window.localStorage.setItem("token", result.data);
      const userData = await findOneDrawdbUserName(values.userName);
      window.localStorage.setItem("userData", JSON.stringify(userData.data));
      navigate("/editor");
      Toast.success("登陆成功");
    }
  };

  useEffect(() => {
    document.body.setAttribute("theme-mode", "light");
    document.title = "数据库表设计";
  });

  return (
    <div>
      <div className="flex flex-col h-screen ">
        <Navbar />
        <div className="flex-1 flex-col relative">
          <div className="h-full md:hidden">
            <SimpleCanvas diagram={diagram} zoom={0.85} />
          </div>
          <div className="hidden md:block h-full bg-dots"></div>
          <div
            className="absolute left-28 top-[40%] translate-y-[-50%] md:left-[50%] md:translate-x-[-50%] p-8 md:p-3 md:w-full text-zinc-800 text-center
           bg-white shadow-lg rounded-lg pt-10 pb-10"
          >
            <FadeIn duration={0.75}>
              <div className="text-4xl font-bold tracking-wide">
                <h1 className="py-1 bg-gradient-to-r from-slate-700 from-10% via-slate-500 to-slate-700 inline-block text-transparent bg-clip-text">
                  数据库表设计
                </h1>
              </div>
              <div className="text-lg font-semibold mt-3">
                简单、直观的数据库设计工具和 SQL 生成器
              </div>
            </FadeIn>
            <Form
              className="z-50 mt-10"
              style={{ width: 400 }}
              onSubmit={handleSubmit}
            >
              <Form.Input
                labelPosition="left"
                field="userName"
                label="账号"
                autocomplete="off"
                style={{ width: "100%" }}
                placeholder="请输入账号"
              ></Form.Input>
              <Form.Input
                labelPosition="left"
                field="password"
                label="密码"
                type="password"
                style={{ width: "100%" }}
                placeholder="请输入密码"
              ></Form.Input>
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  marginTop: 24,
                  marginBottom: 10,
                }}
              >
                <p>
                  <Button
                    theme="borderless"
                    style={{
                      color: "var(--semi-color-primary)",
                      marginLeft: 10,
                      cursor: "pointer",
                    }}
                    onClick={() => setRegisterVisible(true)}
                  >
                    注册
                  </Button>
                </p>
                <Button className="shadow-md" htmlType="submit" type="tertiary">
                  登录
                </Button>
              </div>
            </Form>
          </div>
        </div>
      </div>
      <Register
        visible={registerVisible}
        onCancel={() => setRegisterVisible(false)}
      />
    </div>
  );
}
